<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <flightsFilters
          v-if="flightsData.options"
          :options="flightsData.options"
          @setFilter="setFilter"
          :flights="cacheFlightsList"
        />

        <!-- 航班头部布局 -->
        <flightsListHead />

        <!-- 航班信息 -->
        <flightsItem :data="item" v-for="item in dataList" :key="item.id" />
        <div v-if="flightsData.flights&&flightsData.flights.length==0">找不到该城市的机票</div>
        <el-pagination
          v-if="flightsData.flights"
          layout="prev, pager, next, jumper, total , sizes"
          :current-page="pageIndex"
          :total="flightsData.flights.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[2, 5,8, 10]"
        ></el-pagination>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <flightsAside />
      </div>
    </el-row>
  </section>
</template>

<script>
import flightsListHead from "@/components/air/flightsListHead";
import flightsItem from "@/components/air/flightsItem";
import flightsFilters from "@/components/air/flightsFilters";
import flightsAside from "@/components/air/flightsAside";
export default {
  components: {
    flightsListHead,
    flightsItem,
    flightsFilters,
    flightsAside
  },
  data() {
    return {
      // dataList: [],
      flightsData: {},
      cacheFlightsList: [],
      pageSize: 10,
      pageIndex: 1
    };
  },
  watch: {
    // 因为mounted加载只触发一次,监听页面的路由,当发且变化,再发送一次this.$axios请求,
    $route() {
      this.pageLoad();
    }
  },
  computed: {
    dataList() {
      if (!this.flightsData.flights) {
        return [];
      }
      var beginval = (this.pageIndex - 1) * this.pageSize;
      var endval = beginval + this.pageSize;
      return this.flightsData.flights.slice(beginval, endval);
    }
  },
  mounted() {
    this.pageLoad();
  },
  methods: {
    pageLoad() {
      this.$axios({
        url: "/airs",
        params: this.$route.query
      }).then(res => {
        console.log(res.data.flights);
        console.log(res.data);
        //分页 切割每一页的条数
        this.flightsData = res.data;
        // 每次将原来数组给过滤组件
        this.cacheFlightsList = res.data.flights;
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(index) {
      this.pageIndex = index;
    },
    //过滤页面传过来的
    setFilter(newList) {
      this.flightsData.flights = newList;
      this.pageIndex = 1;
    }
  }
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>